<template>
  <div>
    <van-cell-group>
      <van-field
        size="small"
        clearable
        v-model="shopName"
        label="店铺名称"
        maxlength="20"
        placeholder="请输入店铺名称"
        @blur="shopNameErrmsg = ''"
        :error-message="shopNameErrmsg"
      />
      <van-field
        type="textarea"
        size="small"
        clearable
        label="店铺简介"
        v-model="shopDisc"
        :autosize="true"
        rows="2"
        placeholder="请输入店铺简介"
        @blur="shopDiscErrmsg = ''"
        :error-message="shopDiscErrmsg"
      />
      <van-field
        type="textarea"
        size="small"
        label="店铺地址"
        clearable
        v-model="shopAddr"
        :autosize="true"
        rows="2"
        placeholder="请输入店铺地址"
        @blur="shopAddrErrmsg = ''"
        :error-message="shopAddrErrmsg"
      />
      <van-field
        type="number"
        size="small"
        clearable
        label="手机号"
        v-model="phone"
        maxlength="11"
        placeholder="请输入电话号码"
        @blur="phoneErrmsg = ''"
        :error-message="phoneErrmsg"
      />
      <van-field
        size="small"
        clearable
        label="密码"
        v-model="passwd"
        type="password"
        placeholder="请输入密码"
        @blur="passwdErrmsg = ''"
        :error-message="passwdErrmsg"
      />
      <van-field
        size="small"
        clearable
        v-model="secondPasswd"
        type="password"
        label="再次输入密码"
        placeholder="请再次输入密码"
        @blur="secondPasswdErrmsg = ''"
        :error-message="secondPasswdErrmsg"
      />

      <van-field
        size="small"
        v-model="captcha"
        label="验证码"
        maxlength="6"
        clearable
        placeholder="输入验证码"
        @blur="captchaErrmsg = ''"
        :error-message="captchaErrmsg"
      >
      </van-field>
      <div style=" margin: 0 auto; text-align: center;">
        <img
          style="width:200px; height: 100px;"
          @click="oncaptchaClick"
          :src="captchaImg"
          alt="验证码无法显示"
        />
      </div>
    </van-cell-group>

    <div style="bottom:0; width:100%;">
      <div style="padding: 15px;">
        <van-button size="large" round @click="onSubmitClick" type="danger"
          >立即注册</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Field, Cell, CellGroup, Button, Divider, Image, Toast } from "vant"
import { axios, API_URL } from "../../api"
export default {
  components: {
    [Image.name]: Image,
    [Field.name]: Field,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Divider.name]: Divider
  },
  data() {
    return {
      shopName: "",
      shopNameErrmsg: "",

      shopDisc: "",
      shopDiscErrmsg: "",

      shopAddr: "",
      shopAddrErrmsg: "",

      phone: "",
      phoneErrmsg: "",

      passwd: "",
      passwdErrmsg: "",

      secondPasswd: "",
      secondPasswdErrmsg: "",

      captcha_identifer: "",
      captcha_code: "",
      captchaErrmsg: "",
      captcha: "",

      captchaImg: ""
    }
  },
  methods: {
    getCaptcha() {
      axios
        .get(API_URL + "captcha", {})
        .then(response => {
          this.captcha_identifer = response.data.identifer
          this.captchaImg = "data:image/jpeg;base64," + response.data.img
        })
        .catch(err => {
          console.error(err)
        })
    },
    oncaptchaClick() {
      this.getCaptcha()
    },
    onSubmitClick() {
      /* 对输入的逻辑做基本的处理，提示错误信息 */
      if (!this.shopName) {
        this.shopNameErrmsg = "请输入店铺名称"
      } else if (!this.shopName.replace(/[^a-zA-Z0-9\u4E00-\u9FA5@.]/g, "")) {
        this.shopNameErrmsg = "店铺名称格式错误"
      }
      this.shopDiscErrmsg = this.shopDisc ? "" : "请输入店铺简介"
      this.captchaErrmsg = this.captcha ? "" : "请输入验证码"
      this.shopAddrErrmsg = this.shopAddr ? "" : "请输入地址信息"
      this.phoneErrmsg = this.phone.length != 11 ? "手机号格式错误" : ""
      this.passwdErrmsg = this.passwd ? "" : "请输入密码"
      this.secondPasswdErrmsg =
        this.secondPasswd != this.passwd ? "两次输入密码不一致" : ""

      /* 向服务器提交注册请求 */
      axios
        .post(API_URL + "shop/create", {
          phone: this.phone,
          password: this.passwd,
          name: this.shopName,
          info: this.shopDisc,
          address: this.shopAddr,
          captcha_identifer: this.captcha_identifer,
          captcha_code: this.captcha
        })
        .then(() => {
          Toast.success("商店注册成功")
          this.$router.push({ name: "shopLogin" })
        })
        .catch(err => {
          if (typeof err.response.data.message === "string") {
            if (err.response.data.message.startsWith("Phone")) {
              Toast("手机号已注册，请直接登录")
              this.$router.push({ name: "login" })
            } else if (err.response.data.message == "Wrong captcha code!") {
              Toast.fail("验证码错误")
              this.getCaptcha()
            }
          } else {
            Toast.fail("注册失败，请重试")
          }
          console.error(err)
        })
    }
  },
  mounted: function() {
    this.getCaptcha()
  }
}
</script>
